<template>
	<view>
		<view class="tab">
			<view class="tabItem" :class="{tabItemA:index == i}" v-for="(item,i) in list" @click="index = i">
				{{item.name}}
			</view>
		</view>
		<view class="tabItemB" :style="'transform: translateX('+ w * index +'px);'">
		</view>
		<view class="orderBox">
			<view class="itemLeft">

				<view class="itemLeftImg">
					<image src="../../static/my.png" style="width: 200rpx;height: 200rpx; border-radius:10rpx;" mode="">
					</image>
					<view class="itemLeftTitle">
						title
					</view>
				</view>
			</view>
			<view class="itemRight">
				<view class="">

					<text class="itemRightTitle">订单号:</text>
					1231526
				</view>
				<view class="">
					<text class="itemRightTitle">订单号:</text>1212
				</view>
				<view class="">
					<text class="itemRightTitle">订单号:</text>465454
				</view>
			</view>
		</view>
		<unicloud-db v-slot:default="{data, loading, error, options}" collection="uni-id-base-order">
			<view v-if="error">{{error.message}}</view>
			<view v-else>
				{{data}}
			</view>
		</unicloud-db>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				w: 0,
				list: [{
						name: '待付款',
						path: "",
						img: ''
					},
					{
						name: '待发货',
						path: "",
						img: ''
					}, {
						name: '待收货',
						path: "",
						img: ''
					}
				]
			};
		},
		onReady() {
			// const query = uni.createSelectorQuery().in(this).select(".tabItem");
			// query.fields({
			// 	size: true,
			// 	scrollOffset: true,

			// }, (data) => {
			// 	console.log("得到节点信息" + JSON.stringify(data));
			// 	console.log("节点的宽为" + data.width);
			// }).exec()



			this.w = uni.getSystemInfoSync().windowWidth / this.list.length
			// console.log(this.w);

		}
	}
</script>

<style lang="scss">
	.tab {
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 35rpx;
		color: #949494;
		transition: all 1s ease;

		.tabItem {

			transition: all 1s ease;
		}

		.tabItemA {
			font-weight: 600;
			color: #000;
		}
	}

	.tabItemB {
		transition: all 1s ease;
		width: 60rpx;
		height: 8rpx;
		border-radius: 50rpx;
		margin-top: 10rpx;
		// margin-left: 100rpx;
		margin-left: 12%;

		background: linear-gradient(90deg, rgb(255, 205, 30), rgb(255, 138, 24));
	}

	.orderBox {
		display: flex;
		padding: 20rpx 40rpx;
		align-items: center;

		.itemLeft {
			margin-right: 40rpx;

			.itemLeftImg {
				position: relative;

				.itemLeftTitle {
					position: absolute;
					left: 0;
					bottom: 0;
					color: #fff;
					right: 0;
					// height: 12rpx;
					height: 50rpx;
					text-align: center;
					border-bottom-left-radius: 10rpx;
					border-bottom-right-radius: 10rpx;
					background-color: rgba(0, 0, 0, 0.5);
				}

			}


		}

		.itemRight {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			height: 200rpx;
			color: #737373;

			.itemRightTitle {
				font-weight: 600;
				font-size: 29rpx;
				color: #000;
				margin-right: 12rpx;
			}
		}
	}
</style>